<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diffscreen</title>
    <script src="./dsweb.js"></script>
</head>
<body>
    <canvas id="canvas" style="margin: 0 auto; display: block;width: 1000px;"></canvas>
    <div style="margin-top: 10px; margin-left: 40%;">
        <button id="start" onclick="start()">开始</button>
        <button onclick="add()">+</button>
        <button onclick="sub()">-</button>
    </div>
    <div style="margin-top: 10px;margin-left: 30%;">
        <div>
            <textarea id="transfer" style="height: 100px;width: 50%;"></textarea>
        </div>
        <button onclick="dsweb.copy_text()">复制出来（文本）</button>
        <button onclick="dsweb.paste_text()">复制进去（文本）</button>
    </div>
    <div style="margin-top: 10px;margin-left: 30%;">
        <label>文件传输：</label>
        <button onclick="file_list_refresh()">文件列表刷新</button>
        <select id="files" style="width: 200px;"></select>
        <button onclick="download()">下载选中文件</button>
        <input id="file" type="file" onchange="upload()">
    </div>
</body>
<script>
    var scale_rate = 0.05;
    function start() {
        dsweb.start("canvas", "transfer");
        var c = document.getElementById("start");
        c.style = 'visibility:hidden';
    }
    function add() {
        var c = document.getElementById("canvas");
        var rect = c.getBoundingClientRect();
        c.style.width = `${(1 + scale_rate) * rect.width}px`;
        c.style.height = `${(1 + scale_rate) * rect.height}px`;
    }
    function sub() {
        var c = document.getElementById("canvas");
        var rect = c.getBoundingClientRect();
        c.style.width = `${(1 - scale_rate) * rect.width}px`;
        c.style.height = `${(1 - scale_rate) * rect.height}px`;
    }
    function file_list_refresh() {
        dsweb.file_list_refresh((files) => {
            var doms = "";
            for (var index = 0; index < files.length; index++) {
                const element = files[index];
                var sdom = `<option value="${element}">${element}</option>`;
                doms += sdom;
            }
            var files = document.getElementById("files");
            files.innerHTML = doms;
        });
    }
    function download() {
        var file = document.getElementById("files").value;
        dsweb.download(file);
    }
    function upload() {
        const fileInput = document.getElementById('file');
        dsweb.upload(fileInput.files[0], (n)=> {
            console.log(`Upload progress: ${n}%`);
        });
    }
</script>
</html>